<template>
  <div id="cont">
    <Form
      ref="detail"
      :rules="formValidate"
      :label-width="140"
      :model="detail"
      class="tab-detail"
    >
      <Row wrap style="align-items: flex-start;margin-bottom:5px;display:block">
        <Col :lg="8" :xs="24">
          <FormItem prop="image" :label-width="50">
            <div class="detail-image-box">
              <viewer :images="detail.image">
                <img
                  style="max-width:100%;max-height:230px"
                  :src="detail.image"
                  alt=""
                  readonly
                />
              </viewer>
            </div>
          </FormItem>
        </Col>
        <Col :lg="8" :xs="24">
          <FormItem label="编号" prop="sn">
            <Input v-model="detail.sn" readonly />
          </FormItem>
          <FormItem label="型号" prop="model">
            <Input v-model="detail.model" readonly />
          </FormItem>
          <FormItem label="供应商" prop="supplier">
            <Input v-model="detail.supplier" readonly />
          </FormItem>
          <FormItem label="驱动形式" prop="driveType">
            <Select v-model="detail.driveType" disabled>
              <Option value="4X2">4X2</Option>
              <Option value="4X4">4X4</Option>
              <Option value="6X4">6X4</Option>
              <Option value="6X6">6X6</Option>
              <Option value="8X8">8X8</Option>
            </Select>
          </FormItem>
          <FormItem label="整车滑行阻力(g)" prop="initialDeceleration">
            <Input
              type="number"
              v-model.number="detail.initialDeceleration"
              style="width:100%"
              :max="1"
              :min="0"
              readonly
            />
          </FormItem>
          <FormItem label="最高车速(km/h)" prop="maxSpeed">
            <Input
              type="number"
              v-model.number="detail.maxSpeed"
              style="width:100%"
              :max="1000"
              :min="0"
              readonly
            />
          </FormItem>
          <FormItem label="最大爬坡度(%)" prop="maxGradient">
            <Input
              type="number"
              v-model.number="detail.maxGradient"
              style="width:100%"
              :max="100"
              :min="0"
              readonly
            />
          </FormItem>
        </Col>
        <Col :lg="8" :xs="24">
          <FormItem label="车身" prop="bodyId">
            <Input v-model="detail.bodySn" style="width:100%" readonly />
          </FormItem>
          <FormItem label="发动机" prop="engineId">
            <Input v-model="detail.engineSn" style="width:100%" readonly />
          </FormItem>
          <FormItem label="变速箱" prop="gearboxId">
            <Input v-model="detail.gearboxSn" style="width:100%" readonly />
          </FormItem>
          <FormItem label="变矩器" prop="torqueConvertId">
            <Input
              v-model="detail.torqueConvertSn"
              style="width:100%"
              readonly
            />
          </FormItem>
          <FormItem label="驱动桥" prop="transaxleId">
            <Input v-model="detail.transaxleSn" style="width:100%" readonly />
          </FormItem>
          <FormItem label="传动轴" prop="driveShaftId">
            <Input v-model="detail.driveShaftSn" style="width:100%" readonly />
          </FormItem>
          <FormItem label="轮胎" prop="wheelId">
            <Input v-model="detail.wheelSn" style="width:100%" readonly />
          </FormItem>
          <FormItem :label-width="30">
            其他人是否可见
            <i-switch
              v-model="detail.isIndexShow"
              :true-value="1"
              :false-value="0"
              disabled
            />
            其他人是否可用
            <i-switch
              v-model="detail.otherCanUse"
              :true-value="1"
              :false-value="0"
              disabled
            />
          </FormItem>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
import { vehicleApi } from "@/api/vehicle";
import { bodyApi } from "@/api/body";
// 发动机
import { engineApi } from "@/api/engine";
// 变速箱
import { gearboxApi } from "@/api/gearbox";
// 变矩器
import { torqueConverterApi } from "@/api/torque-converter";
// 驱动桥
import { transaxleApi } from "@/api/transaxle";
// 传动轴
import { driveshaftApi } from "@/api/driveshaft";
// 轮胎
import { wheelApi } from "@/api/wheel";
export default {
  name: "VehicleDetail",
  components: {},
  props: {
    /* id:{type:String} */
  },
  data() {
    return {
      id: null,

      detail: null, // 发动机详情
      dataArray: {
        // 车身
        body: [],
        // 发动机
        engine: [],
        // 电机
        motor: [],
        // 电池
        battery: [],
        // 变速箱
        gearbox: [],
        // 变矩器
        torqueConverter: [],
        // 驱动桥
        transaxle: [],
        // 传动轴
        driveshaft: [],
        // 轮胎
        wheel: []
      },
      // 表单验证
      formValidate: {
        // 编号
        sn: [{ required: true, message: "请输入编号", trigger: "change" }],
        // 型号
        model: [{ required: true, message: "请输入型号", trigger: "change" }],

        // 驱动形式
        driveType: [
          { required: true, message: "请输入驱动形式", trigger: "change" }
        ],
        initialDeceleration: [
          {
            type: "number",
            min: 0,
            max: 1,
            message: "请输入0到1的数字",
            trigger: "change"
          }
        ],
        maxSpeed: [
          {
            type: "number",
            min: 0,
            max: 1000,
            message: "请输入0到1000的数字",
            trigger: "change"
          }
        ],
        maxGradient: [
          {
            type: "number",
            min: 0,
            max: 100,
            message: "请输入0到100的数字",
            trigger: "change"
          }
        ],
        // 车身
        bodyId: [
          {
            type: "number",
            required: true,
            message: "请选择车身",
            trigger: "change"
          }
        ],

        // 轮胎
        wheelId: [
          {
            type: "number",
            required: true,
            message: "请选择轮胎",
            trigger: "change"
          }
        ],
        // 图片
        image: [{ required: true, message: "请上传图片", trigger: "change" }]
      }
    };
  },
  watch: {},
  mounted() {
    this.id = this.$route.query.id;
    this.getDataArray();
    this.getDetail();
  },
  methods: {
    getDataArray() {
      let params = {
        pageNum: 1,
        pageSize: 100
      };
      bodyApi.queryBody(params).then(result => {
        this.dataArray.body = result.data.list;
      });

      engineApi.queryEngine(params).then(result => {
        this.dataArray.engine = result.data.list;
      });

      gearboxApi.queryGearbox(params).then(result => {
        this.dataArray.gearbox = result.data.list;
      });

      torqueConverterApi.queryTorqueConverter(params).then(result => {
        this.dataArray.torqueConvert = result.data.list;
      });

      transaxleApi.queryTransaxle(params).then(result => {
        this.dataArray.transaxle = result.data.list;
      });

      driveshaftApi.queryDriveshaft(params).then(result => {
        this.dataArray.driveShaft = result.data.list;
      });

      wheelApi.queryWheel(params).then(result => {
        this.dataArray.wheel = result.data.list;
      });
    },
    // 获取发动机详情数据
    getDetail() {
      vehicleApi.getById(this.id).then(res => {
        this.detail = res.data;
      });
    }
  }
};
</script>

<style>
#cont {
  background-color: #fff;
  padding: 30px 30px 0 30px;
}

.tab-detail {
  margin-bottom: 50px;
}
.tab-detail input {
  background-color: #f4f4f4 !important;
}

.tab-detail span {
  color: #000 !important;
}

.tab-detail i {
  display: none !important;
}
.detail-image-box {
  width: 100%;
  margin-bottom: 10px;
  height: 230px;
  border: 1px dashed #dcdee2;
  text-align: center;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
}
</style>
